// 短信验证码注册
// 验证码状态
// 注册状态
import React, { useEffect, useRef, useState } from 'react'
import { View } from 'react-native'
import { Button, CheckBox, Divider, Header, Input, Text, Tooltip } from 'react-native-elements'
import AntDesign from 'react-native-vector-icons/FontAwesome'
import { connect } from 'react-redux'
import { checkPassword, checkPhone, globalColor, pxPage, resetAction, throttle } from '../../../common/Common'
// import { ClearInput, Foot, LtftDesign } from '../../../components/components'
import { ClearInput, Foot, LtftDesign } from '../../../components/Components'
import { Register_func, resister_phone } from '../../../redux/actions/Register+Login'
import { List } from './Login'
import styles from './Style'

const Register = (props) => {
    const [user, setUser] = useState('');
    // 验证码不是密码了
    const [_password, setPassword] = useState('');
    // 倒计时时间
    const [time, setTime] = useState(0);
    const [phone_right, setPhone_right] = useState(true);
    const [password_right, setPassword_right] = useState(true);
    const [check, setCheck] = useState(false);
    const [send, setSend] = useState(false);


    const todoinput = useRef();
    const password = useRef();
    const tooltipRef = useRef(null);

    // 验证码倒计时
    useEffect(() => {
        setTimeout(() => {
            if (time > 0) {
                let _time = time
                setTime(_time - 1)
            } else {
                setTime(0)
                setSend(false)
            }
        }, 1000)
    }, [time, check])

    // 卸载组件时将定时置为0，要不然会在卸载之后还会由状态的变化
    useEffect(() => {
        return () => { setTime(0) }
    }, [])
    const { navigation } = props;
    return (
        <View style={{ flex: 1 }}>
            <Header
                backgroundColor={globalColor.defaultColor}
                leftComponent={<LtftDesign props={props} />}
                centerComponent={null}
                rightComponent={
                    <Button
                        title="登录"
                        buttonStyle={{ backgroundColor: null }}
                        onPress={throttle(() => {
                            navigation.push('Login_phone')
                        }, 2000)}
                    ></Button>
                }
                elevated={true}
            ></Header>
            <View style={styles.container}>
                <Text style={styles.messagelogin}>短信验证码注册</Text>
                <Divider style={styles.Divider}></Divider>
                <View style={styles.view_input}>
                    <Input
                        ref={todoinput}
                        label="手机号"
                        placeholder="输入手机号"
                        autoCompleteType={'tel'}
                        leftIcon={<AntDesign name="user" size={pxPage(22)}></AntDesign>}
                        rightIcon={<ClearInput todoinput={todoinput} context={user} func={setUser} />}
                        keyboardType={'phone-pad'}
                        maxLength={25}
                        onChangeText={value => {
                            setUser(value)
                        }}
                        errorMessage={
                            phone_right
                                ? null
                                : '手机号错误'
                        }
                    ></Input>
                    <Input
                        ref={password}
                        label="验证码"
                        placeholder="输入验证码"
                        autoCompleteType={'password'}
                        leftIcon={<AntDesign name="lock" size={pxPage(22)}></AntDesign>}
                        rightIcon={
                            send
                                ? <Button
                                    title={`${time}s后获取`}
                                    buttonStyle={{ backgroundColor: globalColor.defaultFontColor_dis, borderRadius: 25 }}
                                    disabled
                                ></Button>
                                : <Button
                                    title="获取验证码"
                                    buttonStyle={{ backgroundColor: globalColor.defaultColor, borderRadius: 25 }}
                                    onPress={throttle(() => {
                                        // 获取验证码
                                        setPhone_right(checkPhone(user))
                                        if (checkPhone(user)) {
                                            setPhone_right(true)
                                            setSend(true)
                                            // 设置倒计时
                                            setTime(60)
                                            props.resister_phone(user)
                                        }
                                    }, 2000)}
                                ></Button>
                        }
                        keyboardType={'visible-password'}
                        maxLength={25}
                        onChangeText={value => {
                            setPassword(value)
                        }}
                        errorMessage={
                            password_right
                                ? null
                                : '请填写验证码'
                        }
                    ></Input>
                    <Divider style={styles.Divider}></Divider>
                    <Button
                        title="注册"
                        buttonStyle={styles.buttonStyle}
                        onPress={throttle(() => {
                            setPhone_right(checkPhone(user))
                            if (checkPhone(user)) {
                                setPassword_right(checkPassword(_password))
                                if (checkPassword(_password)) {
                                    if (check) {
                                        props.Register_func(user, _password)
                                        navigation.dispatch(resetAction)
                                    }
                                    else tooltipRef.current.toggleTooltip()
                                }
                            }
                        }, 2000)}
                    ></Button>
                    <View style={{ flexDirection: 'row', justifyContent: 'center', width: '100%', marginTop: pxPage(20), alignItems: 'center' }}>
                        <Tooltip
                            closeOnlyOnBackdropPress={check ? true : false}
                            popover={<Text style={{ color: globalColor.defaultBackgroundColor }}>仔细阅读并同意 </Text>}
                            ref={tooltipRef}
                            overlayColor="fff"
                            backgroundColor={globalColor.defaultFontColor_dis}
                        >
                            <View style={styles.view_input_view_two}>
                                <CheckBox
                                    title='我已阅读并同意'
                                    checkedColor={globalColor.defaultColor}
                                    checked={check}
                                    checkedIcon='dot-circle-o'
                                    uncheckedIcon='circle-o'
                                    onPress={throttle(() => {
                                        setCheck(!check)
                                    }, 2000)}
                                    containerStyle={{ backgroundColor: null, alignSelf: 'auto', borderWidth: 0, paddingEnd: 0, paddingStart: 0, paddingBottom: 0, paddingTop: 0, marginRight: 0 }}
                                    textStyle={styles.titleStyle}
                                    size={pxPage(12)}
                                ></CheckBox>
                                <Button
                                    buttonStyle={styles.buttonStyle_two}
                                    title="用户服务协议"
                                    titleStyle={styles.titleStyle_two}
                                ></Button>
                                <Text style={styles.titleStyle}>和</Text>
                                <Button
                                    buttonStyle={styles.buttonStyle_two}
                                    title="隐私政策"
                                    titleStyle={styles.titleStyle_two}
                                ></Button>
                            </View>
                        </Tooltip>
                    </View>
                    <Foot props={props} List={List} styles={styles} />
                </View>
            </View>
        </View>
    )
}

const mapStateToProps = state => ({
    nav: state.nav,
    verification: state.verification,
    register: state.register
})
const mapDispatchToProps = dispatch => ({
    resister_phone: (user) => dispatch(resister_phone(user)),
    Register_func: (user, vifi) => dispatch(Register_func(user, vifi))
});
export default connect(mapStateToProps, mapDispatchToProps)(Register)